<template>
  <!-- 容器 -->
  <div class="node-management">
    <!-- 查询区 -->
    <div class="search-bar">
      <el-input
        v-model="searchKey"
        placeholder="输入关键字查询"
        clearable
        class="search-input"
      />
      <el-select
        v-model="tableMode"
        placeholder="列表元素"
        clearable
        class="table-mode-select"
      >
        <el-option
          label="列表元素"
          value="list"
        />
      </el-select>
      <el-button type="primary" class="add-button">新增</el-button>
    </div>

    <!-- 表格区 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
      class="node-table"
      :header-cell-style="{ background: '#f8f9fb', color: '#606266' }"
    >
      <!-- 多选框列 -->
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      <!-- ID 列 -->
      <el-table-column
        prop="id"
        label="ID"
        align="center"
      />
      <!-- 节点名称列 -->
      <el-table-column
        prop="nodeName"
        label="节点名称"
        align="center"
      >
        <template #default="scope">
          {{ scope.row.nodeName }}
        </template>
      </el-table-column>
      <!-- 节点类型列 -->
      <el-table-column
        prop="nodeType"
        label="节点类型"
        align="center"
      >
        <template #default="scope">
          {{ scope.row.nodeType }}
        </template>
      </el-table-column>
      <!-- 责任单位列 -->
      <el-table-column
        prop="dutyUnit"
        label="责任单位"
        align="center"
      />
      <!-- 管理员列 -->
      <el-table-column
        prop="manager"
        label="管理员"
        align="center"
      />
      <!-- 联系电话列 -->
      <el-table-column
        prop="phone"
        label="联系电话"
        align="center"
      />
      <!-- 状态列 -->
      <el-table-column
        prop="status"
        label="状态"
        align="center"
      >
        <template #default="scope">
          <el-tag :type="getStatusTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <!-- 创建时间列 -->
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
      />
      <!-- 是否启用列 -->
      <el-table-column
        prop="isEnabled"
        label="是否启用"
        align="center"
      >
        <template #default="scope">
          <el-switch
            v-model="scope.row.isEnabled"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :disabled="true"
          />
        </template>
      </el-table-column>
      <!-- 操作列 -->
      <el-table-column
        label="操作"
        align="center"
      >
        <template #default="scope">
          <el-icon :size="16" class="mr-2">
            <Edit />
          </el-icon>
          <el-icon :size="16">
            <Delete />
          </el-icon>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
// 引入 Element Plus 组件
import { ElInput, ElSelect, ElOption, ElButton, ElTable, ElTableColumn, ElTag, ElSwitch, ElIcon, ElLoading } from 'element-plus'
// 引入 Element Plus 图标
import { Edit, Delete } from '@element-plus/icons-vue'
// 引入 Element Plus 样式（如果是全局引入可忽略，按需引入需确保已配置）
import 'element-plus/dist/index.css'

// 定义表格数据类型
interface TableRow {
  id: string
  nodeName: string
  nodeType: string
  dutyUnit: string
  manager: string
  phone: string
  status: string
  createTime: string
  isEnabled: boolean
}

// 响应式数据
const searchKey = ref('') // 搜索关键字
const tableMode = ref('list') // 列表元素选择
const loading = ref(false) // 表格加载状态
const tableData: TableRow[] = ref([
  {
    id: '4321',
    nodeName: 'L1_WJ_BJ_12345',
    nodeType: '集团级',
    dutyUnit: '哈尔滨工业大学',
    manager: '陆长河',
    phone: '18501239876',
    status: '成功',
    createTime: '2025-10-21 16:34:56',
    isEnabled: true
  },
  {
    id: '4322',
    nodeName: 'L1_WJ_BJ_12345',
    nodeType: '省市级',
    dutyUnit: '哈尔滨工业大学',
    manager: '陆长河',
    phone: '18501239876',
    status: '失败',
    createTime: '2025-10-21 16:34:56',
    isEnabled: false
  },
  {
    id: '4323',
    nodeName: 'L1_WJ_BJ_12345',
    nodeType: '省市级',
    dutyUnit: '哈尔滨工业大学',
    manager: '陆长河',
    phone: '18501239876',
    status: '成功',
    createTime: '2025-10-21 16:34:56',
    isEnabled: true
  },
  {
    id: '4324',
    nodeName: 'L1_WJ_BJ_12345',
    nodeType: '区县级',
    dutyUnit: '哈尔滨工业大学',
    manager: '陆长河',
    phone: '18501239876',
    status: '成功',
    createTime: '2025-10-21 16:34:56',
    isEnabled: false
  }
])

// 获取状态标签类型
const getStatusTagType = (status: string) => {
  switch (status) {
    case '成功':
      return 'success'
    case '失败':
      return 'danger'
    default:
      return ''
  }
}
</script>

<style scoped lang="scss">
// 容器样式
.node-management {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  // 查询区样式
 .search-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;

   .search-input {
      width: 240px;
    }

   .table-mode-select {
      width: 120px;
      margin-left: 12px;
    }

   .add-button {
      // 可根据需求调整按钮样式
    }
  }

  // 表格样式
 .node-table {
    --el-table-header-text-color: #606266;

    // 调整斑马纹背景（可选）
    &.el-table--striped.el-table__body tr.el-table__row--striped td {
      background-color: #fafafa;
    }
  }
}
</style>